<template>
  <div>
    <h4 class="boardName" @click="gotoThat">
      效率分析
      <a-icon type="right" />
    </h4>
    <div class=" lightBox" style="height:380px">
      <a-card
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="(key) => onTabChange(key, 'noTitleKey')"
      >
        <linechart v-if="chartData" :chart-data="chartData" :height="'320px'" :str="str"></linechart>

        <a-empty style="margin-top:100px" v-else />
      </a-card>
    </div>
  </div>
</template>

<script>
import linechart from '../../../echartsCom/linechart.vue';
export default {
  name: 'index',
  components: {
    linechart,
  },
  props: {
    chartData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tabListNoTitle: [
        { key: '1', tab: '开机率' },
        { key: '2', tab: '运行时间' },
        // { key: '3', tab: '故障时间' },
      ],
      noTitleKey: '1',
      // chartData: {
      //   expectedData: [200, 192, 120, 144, 160, 130, 140],
      //   expectedData2: [180, 160, 151, 106, 145, 150, 130],
      //   expectedData3: [18, 16, 15, 10, 14, 15, 10],
      //   expectedData4: [109, 100, 110, 160, 150, 100, 108],
      //   expectedData5: [145, 167, 18, 190, 125, 178, 140],
      //   date: ["2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06", "2020-01-07"],
      //   name1: "产线A", name2: "产线B", name3: "产线C", name4: "产线D", name5: "产线E"
      // },
      str: '%',
    };
  },
  watch: {
    chartData(val) {
      console.log(val);
      return val;
    },
  },
  methods: {
    gotoThat() {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push('/statistics');
    },
    onTabChange(key, type) {
      this[type] = key;
      if (key == 1) {
        this.str = '%';
      } else {
        this.str = '小时';
      }
      this.$emit('onTabChange', key);
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .ant-card {
  background-color: rgba(0, 0, 0, 0) !important;
}
::v-deep .ant-card-bordered {
  border: 0 !important;
}
::v-deep .ant-card-body {
  padding: 5px 16px !important;
}
@import '../../light.less';
</style>
